<template>
  <view class="messages-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">消息中心</text>
      <text class="unread-count" v-if="unreadCount > 0">{{ unreadCount }}</text>
    </view>
    
    <!-- 消息列表 -->
    <view class="messages-section">
      <text class="section-title">{{ messages.length > 0 ? `消息列表 (${messages.length})` : '消息列表' }}</text>
      <view class="messages-list">
        <view v-if="messages.length === 0" class="empty-tip">
          <text class="empty-icon">📬</text>
          <text class="empty-text">暂无消息</text>
          <text class="empty-subtext">安静的像一片湖水~</text>
        </view>
        <view 
          v-for="(message, index) in messages" 
          :key="index" 
          class="message-item"
          :class="{ unread: !message.read }"
          @click="readMessage(index)"
        >
          <view class="message-header">
            <view class="sender-info">
              <view class="avatar-container">
                <text class="avatar">{{ message.senderAvatar || '👤' }}</text>
                <view class="unread-badge" v-if="!message.read"></view>
              </view>
              <text class="sender-name">{{ message.senderName }}</text>
            </view>
            <text class="message-time">{{ formatTime(message.time) }}</text>
          </view>
          <text class="message-content">{{ message.content }}</text>
        </view>
      </view>
    </view>
    
    <!-- 清空消息按钮 -->
    <button class="clear-btn" @click="clearMessages" v-if="messages.length > 0">
      <text class="btn-icon">🗑️</text>
      清空所有消息
    </button>
  </view>
</template>

<script>
import { getFriendMessages, saveFriendMessages } from '@/utils/storage'

export default {
  data() {
    return {
      messages: []
    }
  },
  computed: {
    // 计算未读消息数量
    unreadCount() {
      return this.messages.filter(msg => !msg.read).length
    }
  },
  onLoad() {
    this.loadMessages()
  },
  methods: {
    loadMessages() {
      this.messages = getFriendMessages()
      // 按时间倒序排列
      this.messages.sort((a, b) => new Date(b.time) - new Date(a.time))
    },
    
    // 格式化时间显示
    formatTime(timeStr) {
      const date = new Date(timeStr)
      const now = new Date()
      const diff = now - date
      const minutes = Math.floor(diff / 60000)
      const hours = Math.floor(diff / 3600000)
      const days = Math.floor(diff / 86400000)
      
      if (minutes < 60) {
        return `${minutes}分钟前`
      } else if (hours < 24) {
        return `${hours}小时前`
      } else if (days < 7) {
        return `${days}天前`
      } else {
        return `${date.getMonth() + 1}/${date.getDate()}`
      }
    },
    
    // 标记消息为已读
    readMessage(index) {
      this.messages[index].read = true
      saveFriendMessages(this.messages)
    },
    
    // 清空消息
    clearMessages() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有消息吗？',
        success: (res) => {
          if (res.confirm) {
            saveFriendMessages([])
            this.messages = []
            uni.showToast({ title: '已清空', icon: 'success' })
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.messages-page {
  padding: 20rpx;
  min-height: 100vh;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

/* 页面标题 */
.page-header {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10rpx);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

/* 未读消息数量 */
.unread-count {
  background: linear-gradient(135deg, #f093fb, #f5576c);
  color: white;
  font-size: 24rpx;
  font-weight: bold;
  padding: 8rpx 18rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(245, 87, 108, 0.3);
  min-width: 40rpx;
  text-align: center;
}

/* 消息列表 */
.messages-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 25rpx;
  display: block;
}

.messages-list {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 25rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10rpx);
}

/* 空状态提示 */
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 20rpx;
  text-align: center;
}

.empty-icon {
  font-size: 140rpx;
  margin-bottom: 30rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #666;
  margin-bottom: 10rpx;
}

.empty-subtext {
  font-size: 24rpx;
  color: #999;
  background: rgba(168, 237, 234, 0.2);
  padding: 15rpx 30rpx;
  border-radius: 25rpx;
}

/* 消息项 */
.message-item {
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.message-item:active {
  background: rgba(168, 237, 234, 0.2);
  transform: scale(0.98);
}

.message-item:last-child {
  border-bottom: none;
}

.message-item.unread {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(25, 118, 210, 0.1));
  border-left: 5rpx solid rgba(33, 150, 243, 0.8);
}

/* 消息头部 */
.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.sender-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  flex: 1;
}

.avatar-container {
  position: relative;
}

.avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
  font-size: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 15rpx rgba(33, 150, 243, 0.4);
  transition: all 0.3s ease;
}

/* 未读消息徽章 */
.unread-badge {
  position: absolute;
  top: -5rpx;
  right: -5rpx;
  width: 20rpx;
  height: 20rpx;
  background: linear-gradient(135deg, #2196f3, #1976d2);
  border-radius: 50%;
  border: 3rpx solid white;
  box-shadow: 0 2rpx 8rpx rgba(33, 150, 243, 0.5);
}

.sender-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.message-time {
  font-size: 24rpx;
  color: #999;
  background: rgba(254, 214, 227, 0.3);
  padding: 8rpx 16rpx;
  border-radius: 15rpx;
}

/* 消息内容 */
.message-content {
  font-size: 26rpx;
  line-height: 1.6;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 20rpx;
}

/* 清空消息按钮 */
.clear-btn {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: white;
  border-radius: 50rpx;
  padding: 25rpx;
  margin-top: 30rpx;
  font-size: 28rpx;
  border: none;
  outline: none;
  box-shadow: 0 4rpx 15rpx rgba(33, 150, 243, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rpx;
  width: 100%;
}

.clear-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 10rpx rgba(33, 150, 243, 0.2);
}

.btn-icon {
  font-size: 32rpx;
}
</style>